<script setup lang="ts">
import { ref, reactive } from 'vue'
import { LokiLogViewer } from '../components/LokiLogViewer'

// 引用组件实例，用于调用组件方法
const logViewer = ref(null)

// 预设的命名空间和Pod
const demoParams = reactive({
  namespace: 'dp-56',
  pod: 'task-thxplo2a-worker-0'
})

// 自定义配置选项
const customTerminalOptions = {
  fontSize: 14,
  theme: {
    background: '#121212',
    foreground: '#e0e0e0'
  }
}

// 事件处理函数
const handleLogsLoaded = (logs: string[]) => {
  console.log(`加载了 ${logs.length} 条日志记录`)
}

const handleError = (error: any) => {
  console.error('日志查询出错:', error)
}

const handleLiveModeChange = (isLive: boolean) => {
  console.log(`实时模式已${isLive ? '启用' : '禁用'}`)
}

// 手动触发日志查询
const queryLogsManually = () => {
  logViewer.value?.queryLogs()
}
</script>

<template>
  <div class="component-demo">
    <h1>Loki日志查看器组件演示</h1>
    
    <div class="demo-controls">
      <el-button type="primary" @click="queryLogsManually">手动查询日志</el-button>
    </div>
    
    <div class="viewer-container">
      <LokiLogViewer
        ref="logViewer"
        title="自定义Loki日志查看器"
        height="600px"
        :namespace="demoParams.namespace"
        :pod="demoParams.pod"
        :terminalOptions="customTerminalOptions"
        :autoRefreshInterval="3000"
        :defaultTimeRange="30"
        @logs-loaded="handleLogsLoaded"
        @error="handleError"
        @live-mode-change="handleLiveModeChange"
      />
    </div>
    
    <div class="usage-example">
      <h2>使用示例代码</h2>
      <pre><code>// 基本用法 - 必须提供namespace和pod参数
&lt;LokiLogViewer
  title="Loki日志查看器"
  height="400px"
  :namespace="params.namespace"
  :pod="params.pod"
  :terminalOptions="customTerminalOptions"
  :autoRefreshInterval="3000"
  :defaultTimeRange="30"
  @logs-loaded="handleLogsLoaded"
  @error="handleError"
  @live-mode-change="handleLiveModeChange"
/&gt;

// 响应式数据示例
const params = reactive({
  namespace: 'default',
  pod: 'nginx-deployment-66b6c48dd5-abcde'
})
&lt;script setup lang="ts"&gt;
import { ref, reactive } from 'vue'
import { LokiLogViewer } from '../components/LokiLogViewer'

const logViewer = ref(null)

const params = reactive({
  namespace: 'default',
  pod: 'nginx-deployment-66b6c48dd5-abcde'
})

const customTerminalOptions = {
  fontSize: 14,
  theme: {
    background: '#121212',
    foreground: '#e0e0e0'
  }
}
&lt;/script&gt;

&lt;template&gt;
  &lt;div style="height: 600px;"&gt;
    &lt;LokiLogViewer
      ref="logViewer"
      title="自定义Loki日志查看器"
      height="600px"
      :namespace="params.namespace"
      :pod="params.pod"
      :terminalOptions="customTerminalOptions"
      :autoRefreshInterval="3000"
      :defaultTimeRange="30"
      @logs-loaded="handleLogsLoaded"
      @error="handleError"
      @live-mode-change="handleLiveModeChange"
    /&gt;
  &lt;/div&gt;
&lt;/template&gt;
      </code></pre>
    </div>
  </div>
</template>

<style scoped>
.component-demo {
  padding: 20px;
}

.demo-section {
  margin-bottom: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background-color: #f9f9f9;
}

.demo-section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #409EFF;
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 10px;
}

.demo-controls {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.current-selection {
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-container {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.usage-example {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.usage-example pre {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>